<template>
  <div id="app">
    <div class="tit">
      <span class="iconfont icon-fanhui"></span>
      <p class="h1">我的订单</p>
    </div>
    <div class="nav">
      <ul>
        <li :key="i" v-for="(v,i) in list" @click="change(i)" :class="[{active:activeName==i}]">{{v.con}}</li>
      </ul>
    </div>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import Await from './Await'
import Take from './Take'
import Complete from './Complete'
import Cancel from './Cancel'
import Appraise from './Appraise'
    export default {
        name:'App',
        components:{
            Await,
            Take,
            Complete,
            Cancel,
            Appraise
        },
        data(){
            return{
                list:[{con:'待支付',com:Await},{con:'待收货',com:Take},{con:'已完成',com:Complete},{con:'已取消',com:Cancel},{con:'待评价',com:Appraise}],
                currentTab:'',
                active:'active',
                activeName:"0"
            }
        },
        mounted(){
            this.currentTab=this.list[0].com;
        },
        methods:{
            change(index){
                this.activeName=index;
                this.currentTab=this.list[index].com
            }
        }
    }
</script>
<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  html{
    font-size: @baseFontSize;
  }
  .px2rem(@name,@px){
      @{name}:@px / 2 / @baseSize * 1rem;
  }

  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
#app {
  .tit{
    position: relative;
    background: orange;
    span{
      position: absolute;
      left: 15px;
      top: 10px;
    }
    .h1{
      text-align: center;
      .px2rem(line-height,80);
      .px2rem(height,80);
      border-bottom: 1px solid gray;
      color: white;
    }
  }
  .nav{
    .px2rem(margin-top,30);
    ul{
      display: flex;
      justify-content: space-around;
      .px2rem(padding-left,30);
      .px2rem(padding-right,30);
      li{
        text-align: center;
        .px2rem(line-height,80);
        .px2rem(height,80);
      }
      li.active{
        border-bottom: 1px solid red;
      }
    }
  }
}


</style>
